<template>
  <div
    class="wrapper-profile-panel"
    :class="{ isNav: props.isNav }"
    @click="handleClick"
  >
    <el-image class="avatar" :src="props.avatar" fit="cover" loading="lazy">
      <template #error>
        <div class="image-slot">
          <el-icon><UserFilled /></el-icon>
        </div>
      </template>
    </el-image>
    <div class="info">
      <div class="text">{{ props.nickname || '微信用户___未设置昵称' }}</div>
      <div class="text sub-text" v-if="props.remark">{{ props.remark }}</div>
      <div class="text sub-text" v-if="props.mobile">{{ props.mobile }}</div>
      <div class="text sub-text" v-if="props.id">
        {{ formatterFillId(props.id) }}
      </div>
      <div class="text sub-text" v-if="props.ownId">{{ props.ownId }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { UserFilled } from '@element-plus/icons-vue';
import { formatterFillId } from '@/utils/util';

import { useRouter } from 'vue-router';
const router = useRouter();

const props = defineProps({
  avatar: {
    type: String,
    // required: true
    default: ''
  },
  nickname: {
    type: String,
    // required: true
    default: '微信用户___未设置昵称'
  },
  ownId: {
    type: String,
    default: ''
  },
  remark: {
    type: String,
    default: ''
  },
  mobile: {
    type: [Number, String],
    default: ''
  },
  id: {
    type: Number,
    default: 0
  },
  isNav: {
    type: Boolean,
    default: false
  }
});

const handleClick = () => {
  if (props.isNav) {
    router.push({
      path: `/user_list`,
      query: {
        nickname: props.nickname,
        // 加个time，让路由每次都执行
        _t: Date.now()
      }
    });
  }
};
</script>

<style lang="scss" scoped>
.wrapper-profile-panel {
  display: flex;
  align-items: center;

  &.isNav {
    cursor: pointer;
  }

  .avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    // box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    border: 1px solid #e4e7ed;
    margin-right: 16px;

    .image-slot {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      background: var(--el-text-color-disabled);
      color: var(--el-color-white);
      font-size: 30px;

      .el-icon {
        font-size: 30px;
      }
    }
  }

  .info {
    flex: 1;
    width: 0;

    .sub-text {
      color: var(--el-color-info-light-3);
    }
  }
}
</style>
